<template>
  <div>
    <vxe-table
      ref="mytable"
      border
      align="center"
      :data="tableData"
      :resizable="true"
      auto-resize
      :scroll-y="{ enabled: false }"
      v-loading="loading"
      style="width: 100%; margin-top: 10px; overflow: auto"
      highlight-current-row
      :span-method="arraySpanMethod"
      :cell-style="cellStyleEvent"
    >
      <vxe-colgroup title="项目" header-class-name="customer-span">
        <vxe-column
          field="name"
          title="项目"
          style="display: none"
          header-class-name="headerHiddn"
        ></vxe-column>
        <vxe-column
          field="children"
          width="200"
          title="子节点"
          style="display: none"
          header-class-name="headerHiddn"
        ></vxe-column>
      </vxe-colgroup>

      <vxe-column field="tab" title="代码"> </vxe-column>
      <vxe-colgroup>
        <vxe-column
          field="amount2"
          title="总计"
          style="border-top: none"
        ></vxe-column>
        <vxe-column field="amount3" title="女"></vxe-column>
        <vxe-column field="amount3" title="少数名族"></vxe-column>
        <vxe-column field="amount3" title="非中共党员"></vxe-column>
        <vxe-column field="amount3" title="博士"></vxe-column>
        <vxe-column field="amount3" title="硕士"></vxe-column>
        <vxe-column field="amount3" title="学士"></vxe-column>
        <vxe-column
          field="amount3"
          title="具有2年以上基层工作经验"
        ></vxe-column>
        <vxe-column
          field="amount3"
          title="有企业、高校、科研院所正职领导任职经历"
        ></vxe-column>
        <vxe-column field="amount3" title="高级职称"></vxe-column>

        <vxe-colgroup>
          <vxe-column field="amount3" title="参加理论培训"></vxe-column>
          <vxe-column field="amount3" title="出国出境培训"></vxe-column>
        </vxe-colgroup>

        <vxe-colgroup field="amount3" title="实践锻炼">
          <vxe-column field="amount3" title="本单位岗位轮换"></vxe-column>
          <vxe-column field="amount3" title="交流任职"></vxe-column>
          <vxe-column field="amount3" title="挂职锻炼"></vxe-column>
        </vxe-colgroup>

        <vxe-column field="amount3" title="近期可提拔使用"></vxe-column>
      </vxe-colgroup>
      <vxe-colgroup field="amount3" title="最高学历">
        <vxe-column field="amount3" title="研究生"></vxe-column>
        <vxe-column field="amount3" title="大学本科"></vxe-column>
        <vxe-column field="amount3" title="大学专科"></vxe-column>
        <vxe-column field="amount3" title="中专及以下"></vxe-column>
      </vxe-colgroup>
      <vxe-colgroup field="amount3" title="全日制学历">
        <vxe-column field="amount3" title="研究生"></vxe-column>
        <vxe-column field="amount3" title="大学本科"></vxe-column>
        <vxe-column field="amount3" title="大学专科"></vxe-column>
        <vxe-column field="amount3" title="中专及以下"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      heightY: window.innerHeight - 130 + "px",
      activeTab: "basic",
      heightTab: window.innerHeight - 132 + "px",
      loading: false,
      // heightVxe: window.innerHeight - 185 + "px",
      cellStyle: {
      myClass: {
        color: 'red',
        fontWeight: 'bold'
      }
    }
    };
  },
  created() {
    this.loading = true;
    setTimeout(() => {
      this.tableData = [
        {
          id: "12987122",
          name: "行",
          tab: "列",
          amount2: "3.2",
          amount3: 10,
        }, //现在有name和tab内容，一个为行，一个为列，我想让数据中展示行和列的动态序号，和execl表中的类
        {
          id: "12987123",
          name: "可作为副省级城市党政副职培养的干部",
          tab: "165",
          amount2: "1",
          amount3: 12,
        },
        {
          id: "12987124",
          name: "正地厅级单位",
          children: "可作为（地、州、盟）党政正职培养的干部",
          tab: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          name: "正地厅级单位",
          tab: "621",
          children: "可作为（地、州、盟）党政副职培养的干部",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "正地厅级单位",
          children: "可作为省直机关正职培养的干部",
          tab: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "正地厅级单位",
          children: "可作为省直机关副职培养的干部",
          tab: "539",
          amount2: "4.1",
          amount3: 15,
        },

        {
          id: "12987124",
          name: "副地厅级单位",
          children: "可作为副地厅级行政区党政正职培养的干部",
          tab: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          name: "副地厅级单位",
          tab: "621",
          children: "可作为副地厅级行政区党政副职培养的干部",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "副地厅级单位",
          children: "可作为省直机关正职培养的干部",
          tab: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "副地厅级单位",
          children: "可作为省直机关副职培养的干部",
          tab: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "副地厅级单位",
          children: "可作为副省级城市市直机关正职培养的干部",
          tab: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "副地厅级单位",
          children: "可作为副省级城市市直机关副职培养的干部",
          tab: "539",
          amount2: "4.1",
          amount3: 15,
        },

        {
          id: "12987125",
          name: "正县处级单位",
          tab: "621",
          children: "可作为（市、区、旗）党政正职培养的干部",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "正县处级单位",
          children: "可作为（市、区、旗）党政副职培养的干部",
          tab: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "正县处级单位",
          children: "可作为（地、州、盟）市直机关正职培养的干部",
          tab: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "正县处级单位",
          children: "可作为（地、州、盟）市直机关副职培养的干部",
          tab: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ];
      this.loading = false;
    }, 1000);
    console.log(this.tableData, "tableData");
  },
  methods: {
    cellStyleEvent( row, column ) {
      console.log(row,"row");
      if(row.columnIndex == 0){
         return this.cellStyle.myClass;
      }
   
  },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (column.property == "name") {
        if (columnIndex === 0 && row.name === "正地厅级单位") {
          if (rowIndex === 2) {
            return { rowspan: 4, colspan: 1 };
          } else {
            return { rowspan: 1, colspan: 0 };
          }
        }
        if (columnIndex === 0 && row.name === "副地厅级单位") {
          if (rowIndex % 6 === 0) {
            return { rowspan: 6, colspan: 1 };
          } else {
            return { rowspan: 1, colspan: 0 };
          }
        }
        if (columnIndex === 0 && row.name === "正县处级单位") {
          if (rowIndex % 4 === 0) {
            return { rowspan: 4, colspan: 1 };
          } else {
            return { rowspan: 1, colspan: 0 };
          }
        }

        // if (columnIndex === 0 && row.name === "行") {
        //   if (rowIndex === 0) {
        //     return {rowspan:1,colspan:2}
        //   }
        // }
        // if (columnIndex === 0 && row.name === "可作为副省级城市党政副职培养的干部") {
        //   if (rowIndex === 1) {
        //     return {rowspan:1,colspan:2}
        //   }
        // }
      }

      let elArr = document.querySelectorAll(".customer-span");
      elArr.forEach((el) => {
        el.setAttribute("rowspan", 3);
      });
      // let elArrE = document.querySelectorAll('.customer-span');
      // elArrE.forEach((el) => {
      //     el.setAttribute('colspan', 2);
      // });
      // if (column.property == "children") {
      // if(columnIndex === 1) {
      //   return {rowspan:1,colspan:2}
      // }
      // }
    },
    // handerMethod({$rowIndex}){
    //   console.log($rowIndex,"rowIndex");
    //   if($rowIndex === 0){
    //       return { display: 'none'}
    //     }
    // }
  },
};
</script>
<style scoped>
/deep/tr.vxe-header--column{
  border: 1px solid #ebebeb !important;
}

/deep/.vxe-table--render-default.vxe-body--row.row--current{
  background-color: #e6f7ff;
}
  /*调整表格文字*/
  >>>.vxe-header--column .vxe-cell--title{
    font-size: 14px;
    font-weight: normal;
    color:#000;
  }
  >>>.vxe-header--row{
    background:#fff;
  }
  >>>.vxe-table--render-default .vxe-cell {
    white-space: pre-line;
    word-break: break-all;
    padding-left: 10px;
    padding-right: 10px;
}
</style>